$(function(){
    // 定义过滤时间的函数
    template.defaults.imports.dateFormat = function(data){
        const dt = new Date(data)
        const y = dt.getFullYear()
        const m = (dt.getMonth() +1).toString().padStart(2,'0')
        const d = dt.getDate().toString().padStart(2,'0')
        const hh = dt.getHours().toString().padStart(2,'0')
        const mm = dt.getMinutes().toString().padStart(2,'0')
        const ss = dt.getSeconds().toString().padStart(2,'0')

        return `${y}/${m}/${d} ${hh}:${mm}:${ss}`
    }

    // 定义查询参数的对象
    let q = {
        pagenum:1,   // 页码值 
        pagesize:2,  // 每页显示几行
        cate_id:'',  // 查询条件 文章的分类
        state:''     // 查询条件 文章的状态
    }

    // 定义获取列表数据的方法
    function getArtList(){
        // 发起ajax请求
        $.get('/my/article/list',q,function(res){
            if(res.status === 0){
                // 调用模板引擎渲染模板结构
                const htmlStr = template('tmpl-tr',res)
                $('tbody').html(htmlStr)

                // 当请求获取数据成功后调用渲染分页的函数
                renderPage(res.total)
            }
        })
    }

    // 初始化文章分类的可选项
    function initCateList(){
        $.get('/my/article/cates',function(res){
            if(res.status === 0){
                // 调用模板引擎渲染下拉菜单的可选项
                const htmlStr = template('tmpl-opt',res)
                $('[name="cate_id"]').html(htmlStr)
                layui.form.render('select')
            }
        })
    }

    
    // 调用获取列表数据的方法
    getArtList()
    // 调用初始化文章分类的可选项的方法
    initCateList()

    // 阻止筛选表单的默认提交行为
    $('form').on('submit',function(e){
        e.preventDefault()
        // 为 q 的查询条件重新赋值
        q.cate_id = $('[name="cate_id"]').val()
        q.state = $('[name="state"]').val()
        // 根据用户新赋值给 q 的值 重新请求服务器并且刷新页面
        getArtList()
    })

    // 为重置按钮绑定点击事件
    $('[type="reset"]').on('click',function(){
        // 点击重置按钮后，重置表单
        // 将 q 的值恢复为默认状态
        q = {
            pagenum:1,   // 页码值 
            pagesize:10,  // 每页显示几行
            cate_id:'',  // 查询条件 文章的分类
            state:''     // 查询条件 文章的状态
        }
        // 根据重置成功的参数对象 q 重新请求数据
        getArtList()
    })

    // 定义一个专门用来渲染分页的函数
    function renderPage(total){
        layui.laypage.render({
            // 指定要把分页效果渲染到那个盒子里面
            elem:'page-box',  
            // 总数据条数
            count: total,
            // 指定要高亮的页码值
            curr:q.pagenum,
            // 每页显示几条数据，默认是10条
            limit: q.pagesize,
            // 每页显示几条数据的菜单项
            limits: [ 2, 3, 5, 10],
            // 指定要渲染的布局效果
            layout: ['count','limit','prev', 'page', 'next','skip'],
            jump:function(obj,first){
                // 1.obj.curr 是当前最新的页码数
                // 2.obj.limit  是每页显示几条数据的菜单项
                // console.log(obj);
                q.pagenum = obj.curr
                q.pagesize = obj.limit
                // 根据最新的条件，请求并渲染列表的数据
                if(first !== true){
                    // 调用获取列表数据的方法
                    getArtList()
                }
                // first  表示是否首次执行  一般用于初始加载的判断
                // 如果是调用 layui.laypage.render 函数渲染的页码区域，则 first 等于 true
                // 否则 如果不是通过 layui.laypage.render 渲染的页码区域，则 first 等于 false 或 undefined 
                // console.log(first);
            }
        })
    }

    // 为 删除按钮 绑定点击事件
    $('body').on('click','.btn-delete',function(){
        const id = $(this).attr('data-id')
        layer.confirm('是否删除?', {icon: 3, title:'提示'}, function(index){
            //do something
            // 发起请求删除数据
            $.get('/my/article/delete/' + id,function(res){
                if(res.status === 0){
                    // 表示删除成功，刷新页面渲染数据
                    if(q.pagenum > 1 && $('tbody tr').length == 1){
                        q.pagenum--
                    }
                    getArtList()
                }
            })
            layer.close(index);
        });
    })
})